<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui@2.15.2/lib/theme-chalk/index.css" rel="stylesheet">
    <title>
        畜禽种类管理
    </title>
</head>
<body style="background-color: white">
<div id="app">
    <template v-loading="indexLoading">
        <div class="block">
            <span>采集分类</span>
            <el-cascader :options="culturedCodeIds" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.culturedCodeId"></el-cascader>
            <span>物种分类</span>
            <el-cascader :options="culturedTypes" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.culturedType"></el-cascader>
            <span>动物种名</span>
            <el-input size="small" style="width: 199px" v-model="searchChange.culturedName" placeholder="请输入内容"></el-input>

            <el-button @click="handleSearch(1)" size="small" type="primary">筛选</el-button>
            <el-button @click="handleSearch(2)" size="small">重置</el-button>
        </div>
        <el-row style="background-color: #eaedf4;padding: 7px;margin: 7px 0">
            <el-button icon="el-icon-plus" onclick="window.location.href='/yxProCultured/addPage'" plain size="mini"
                       type="primary">添加
            </el-button>
        </el-row>
        <el-table :data="tableData" @select="handleSelect"
                  @select-all="handleSelect" fit size="small" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="详情" type="expand">
                <template slot-scope="props">
                    <el-form class="demo-table-expand" inline label-position="left">
                        <el-form-item label="备注">
                            <span>{{ props.row.remark }}</span>
                        </el-form-item>
                        <el-form-item label="更新人员">
                            <span>{{ props.row.updateUser }}</span>
                        </el-form-item>
                        <el-form-item label="添加人员">
                            <span>{{ props.row.addUser }}</span>
                        </el-form-item>
                        <el-form-item label="更新时间">
                            <span>{{ props.row.updateTime }}</span>
                        </el-form-item>
                        <el-form-item label="添加时间">
                            <span>{{ props.row.addTime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="采集分类" prop="culturedCodeId"></el-table-column>
            <el-table-column label="种类分类" prop="culturedType"></el-table-column>
            <el-table-column label="动物种名" prop="culturedName" width="100"></el-table-column>
            <el-table-column label="操作" width="190">

                <template slot-scope="scope">
                    <el-button @click="handle(scope.$index, scope.row,1)" icon="el-icon-edit"
                               size="mini" type="primary">编辑
                    </el-button>
                        <el-popconfirm
                                confirm-button-text='YES' cancel-button-text='NO'
                                icon="el-icon-info" icon-color="red" title="确定删除吗？"
                                @confirm="handle(scope.$index, scope.row,2)" >
                            <el-button icon="el-icon-delete"  slot="reference"
                                       size="mini" type="warning">删除
                            </el-button>
                        </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
        <el-drawer
                :before-close="handleClose" :visible.sync="showDialog"
                direction="rtl" ref="drawer" size="50%" title="编辑">
            <div style="padding:50px">
                <el-form :model="form" label-position="top">
                    <el-form-item :label-width="formLabelWidth" label="采集分类">
                        <el-select placeholder="" v-model="form.culturedCodeId">
                            <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="(item,i) of culturedCodeIds" :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="物种分类">
                        <el-select placeholder="" v-model="form.culturedType">
                            <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="(item,i) of culturedTypes" :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="动物种名">
                        <el-input
                                v-model="form.culturedName">
                        </el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="备注">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="form.remark">
                        </el-input>
                    </el-form-item>

                </el-form>
                <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" alt="" width="100%">
                </el-dialog>
                <div>
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button :loading="loading" @click="handleCommit" type="primary">
                        {{ loading ? '保存中 ...' : '保 存' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="/static/vendor/vue.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.2/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                indexLoading: true,
                pageSize: 10,
                total: 0,
                currentPage: 1,
                showDialog:false,
                searchChange: {culturedCodeId: [], culturedType: [], culturedName: '',},
                culturedTypes: [],
                culturedCodeIds: [],
                tableData: [],
                selectList: [],
                loading: false,
                form: {},
                formLabelWidth: '50px',
                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        methods: {
            /*初始化表格内容*/
            getTableData() {
                con_map = {
                    page_size: this.pageSize,
                    start_num: this.pageSize * (this.currentPage - 1)
                }
                let searchChange = this.searchChange;
                searchChange.page_size=this.pageSize
                searchChange.start_num=this.pageSize * (this.currentPage - 1)
                if (searchChange.culturedCodeId.length>0 || searchChange.culturedType.length>0 || searchChange.culturedName!== '') {
                    let data = top.ajax.synclBody("/yxProCultured/getSearchList", searchChange);
                    this.tableData = data.items;
                    this.total = data.total;
                }else {
                    let res = top.ajax.synclBody("/yxProCultured/getList", con_map);
                    this.tableData = res.data.list;
                    this.total = res.data.count;
                }
            },
            /*筛选*/
            handleSearch(type) {
                let searchChange = this.searchChange;
                if (type === 2) {
                    searchChange.culturedCodeId = [];
                    searchChange.culturedType = [];
                    searchChange.culturedName = '';
                    this.getTableData();

                } else {
                    if (searchChange.culturedCodeId.length>0 || searchChange.culturedType.length>0 || searchChange.culturedName !== '') {
                        searchChange.page_size=this.pageSize
                        searchChange.start_num=this.pageSize * (this.currentPage - 1)
                        let data = top.ajax.synclBody("/yxProCultured/getSearchList", searchChange);
                        this.tableData = data.items;
                        this.total = data.total;
                    }
                }
            },
            /*操作 按钮*/
            handle(index, row, type) {
                switch (type) {
                    case 2: { //删除
                        top.ajax.synclBody("/yxProCultured/updateDelete/" + row.culturedId,);
                        break;
                    }
                    case 1: { //编辑
                        this.form = top.ajax.synclBody("/yxProCultured/selectOne/" + row.culturedId,).data
                        this.showDialog = true
                        break;
                    }
                }
                this.getTableData()
            },
            handleSelect(selectList, val) {
                this.selectList = selectList
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getTableData()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getTableData()
            },
            getCulturedCodeIds(){
                let dicts = top.ajax.syncl("/dictCategory/getDictList/cultured_code_id", "");
                let culturedCodeIds = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    culturedCodeIds.push(bean)
                }
                this.culturedCodeIds = culturedCodeIds;
            },
            getCulturedTypes(){
                let dicts = top.ajax.syncl("/dictCategory/getDictList/cultured_type", "");
                let culturedTypes = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    culturedTypes.push(bean)
                }
                this.culturedTypes = culturedTypes;
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要放弃修改表单吗？')
                    .then(_ => {
                        this.loading = false;
                        this.showDialog = false;
                    }).catch(_ => {
                });
            },
            handleCommit() {
                console.info(this.form)
                let bean = {
                    culturedId:this.form.culturedId,
                    culturedCodeId:this.form.culturedCodeId,
                    culturedType:this.form.culturedType,
                    culturedName:this.form.culturedName,
                    remark:this.form.remark
                }
                this.$confirm("确定提交？", '提示', {type: 'warning'})
                    .then(_ => {
                        this.loading = true;
                        top.ajax.synclBody("/yxProCultured/updateOneById", bean);
                        this.getTableData();
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.loading = false;
                        this.showDialog = false;
                    }).catch(_ => {
                });
            }
        },
        mounted: function () {
            this.getTableData()
            this.getCulturedTypes()
            this.getCulturedCodeIds()
        },
        created() {
            this.indexLoading = false
        }
    })
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .deleteImage{
        width: 148px;
        height: 148px;
        display: inline-block;
        text-align: center;
        align-items: center;
        border-right: 5px;
        position: absolute;
        background-color: rgba(222,222,222,.5);
        top: 0;left: 0;
    }
</style>
</html>
